<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>智能检索统计系统--总部合同额模块</title>
	<!--公用样式-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/supplier/common/css/style.css"/>
	<!--Layui-->
	<link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
	<!--extended-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
	<!--公用样式JS-->
	<script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
	<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
<#--	<script src="echarts.min.js"></script>-->
	<script type="text/javascript" src="${re.contextPath}/plugin/echarts/echarts-4.2.1.min.js" charset="utf-8"></script>
</head>
<style>
	.Right {
		width: 100%;
		overflow-y: scroll;
		left: 16%;
		top: 144px;
	}
	.personnel ul li label {
		display: inline-block;
		width: 12%;
		text-align: right;
	}
	.release .category input, .personnel .category input {
		margin: 10px;
	}
</style>

<body>
<!--头部-->

<!--容器-->
<div class="container clearfix" style="margin-left: 3%;width: 96%;">
	<!--右侧内容-->
	<div class="Right fr mt10">
		<div class="personnel whitebg">
			<ul>
				<li class="clearfix">
					<label class="fl">时间段：</label>
					<div class="ask fl clearfix">
						<input type="text" class="fl" placeholder="选择开始时间" style="width: 128px;" name="gqBeginDate"
							   lay-verify="required"
							   autocomplete="off" id="gqBeginDate" lay-verify="gqBeginDate">
						<span class="fl ml10 mr10">至</span>
						<input type="text" class="fl" placeholder="选择结束时间" style="width: 128px;" name="gqEndDate"
							   lay-verify="required"
							   autocomplete="off" id="gqEndDate" lay-verify="gqEndDate">

					</div>
				</li>
				<hr/>
				<li class="clearfix">
					<label class="fl">业务类型：</label>
					<div class="category clearfix  xmlxdiv">
						<#list xmlx as vo>
								<input type="checkbox" class="fl h15 w25 " name="projectType"
									   value="${vo.badtCode}" onchange="_crt_page.events.xmlxChange(this)">
							<span class="fl mr10">${vo.badtName}</span>
						</#list>
					</div>
				</li>
				<hr/>
				<li class="clearfix">
					<label class="fl">行业：</label>
					<div class="category clearfix  xmlxdiv">
						<#list hy as vo>
							<div style="display: inline-block">
								<input type="checkbox" class="fl h15 w25 doBestInput" name="industry"
									   value="${vo.badtCode}"
										<#if "${project.mainFzField}"?contains("${vo.badtCode}")>
											checked
										</#if>
								>
								<span class="fl mr10">${vo.badtName}</span>
							</div>
						</#list>
					</div>
				</li>
				<hr/>
				<li >
					<label class="fl">合同签订地点：</label>
					<select name="province" class="ml8 fl" id="province" onchange="provinceChange(this)" style="width:100px !important;">
						<option value="">请选择</option>
						<#list ssdd as vo>
							<option value="${vo.code}"
							>${vo.name}</option>
						</#list>
					</select>
					<select name="city" id="city" class="ml8 fl" onchange="cityChange(this)"
							style="width: 100px !important;margin-left: 10px">
						<option value="">请选择</option>
					</select>

					<span  style="margin-left: 20px;">项目状态：</span>
					<select id="status" style="width: 100px">
						<option value="">请选择</option>
						<#list xmzt as vo>
							<option value="${vo.badtCode}">${vo.badtName}</option>
						</#list>
					</select>
				</li>
				<li class="clearfix" >
					<div class="fl mt30" style="width:100%;text-align: center">
						<button type="button" class="layui-btn layui-btn-normal"  style="width: 120px;" id="analyse">开始分析</button>
						<button type="button" class="layui-btn layui-btn-normal greenbg white"  style="width: 120px;background-color: #00B83F" onclick="derive()">导出Excel</button>
					</div>
				</li>
			</ul>
		</div>

<#--		柱状图-->
		<div class="project whitebg" style="text-align: center;">
			<div style="width:100%;height:400px;">
				<div id="main" style="width: 100%;height:400px;"></div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<script type="text/javascript">
	var layer;
	var form = layui.form;
	var table = null;
	var tableIns = null;
	var month;
	var name;
	var num=[];
	var numbers=new Array();
	//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
	var element = "";
	layui.use(['element','layer','laydate'], function () {
		element = layui.element;layer = layui.layer;laydate = layui.laydate;
		laydate.render({
			elem: '#gqBeginDate',
		});
		laydate.render({
			elem: '#gqEndDate',
		});
		//开始分析
		$("#analyse").click(function (){
			var startTime = $('#gqBeginDate').val();
			var endTime = $('#gqEndDate').val();
			if(!startTime||!endTime){
				layer.msg('请选择时间段',{icon:2});return false;
			}
			var province = $('#province').val();
			var city = $('#city').val();
			var status=$('#status').val();
			//业务类型
			var arry= new Array();
			$('input[name="projectType"]:checked').each(function(index, element) {
				//追加到数组中
				arry.push($(this).val());
			});
			//将数组元素连接起来转化为字符串
			var projectType = arry.join(',');
			if(!projectType){
				layer.msg('请选择业务类型',{icon:2});return false;
			}
			//行业
			var industrys = new Array();
			$('input[name="industry"]:checked').each(function(index, element) {
				industrys.push($(this).val());
			});
			var industry = industrys.join(',');
			var company="1564895";
			var jsondata = {
				startTime:startTime,
				endTime:endTime,
				province:province,
				city:city,
				projectType: projectType,
				industry:industry,
				status:status,
				company:company
			};
			console.log(jsondata);
			layerAjax('/search/analysis/headquarters/amounts',jsondata,'',function (d){
				var arr=d.names.split(',');
				var number=d.amount;
				console.log(number);
				name=arr;
				numbers=d.amount;
				signing(arr,number);
			})
		})

	});
	$(function(){
		// signing();
	})


	// 柱状图
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	// 指定图表的配置项和数据
	function signing(names,map){
		option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				name:'万元',
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: names
			},
			series: [
				{
					type: 'bar',
					data: map,
					barWidth: 40,
					itemStyle:{
						normal:{
							color:'#6DAEF2'
						}
					}
				}
			]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	}


	//导出Excel
	function derive(){
		var times = $('#times').val();
		var province = $('#province').val();
		var city = $('#city').val();
		var status=$('#status').val();
		if(!$('#gqBeginDate').val()){
			layer.msg('请先分析',{icon:2});return false;
		}else if(!$('#gqEndDate').val()){
			layer.msg('请先分析',{icon:2});return false;
		}
		//业务类型
		var arry= new Array();
		$('input[name="projectType"]:checked').each(function(index, element) {
			//追加到数组中
			arry.push($(this).val());
		});
		//将数组元素连接起来转化为字符串
		var projectType = arry.join(',');
		if(!projectType){
			layer.msg('请先分析',{icon:2});return false;
		}
		//行业
		var industrys = new Array();
		$('input[name="industry"]:checked').each(function(index, element) {
			industrys.push($(this).val());
		});
		if(!name){
			layer.msg('请先分析',{icon:2});return false;
		}else if(!numbers.length>0){
			layer.msg('请先分析',{icon:2});return false;
		}
		var industry = industrys.join(',');
		//获取全部数据:
		var url= '/search/analysis/headquartersExcel?name='+name+"&number="+numbers+"&startTime="+$('#gqBeginDate').val()+"&endTime="+$('#gqEndDate').val()+
				"&province="+province+"&city="+city+"&projectType="+projectType+"&industry="+industry;
		location.href = url;
	}

	function provinceChange(object){
		var code = $(object).find('option:selected').val();
		if (code == "") {
			return;
		}
		layerAjaxGet('/sys/register/getOrganize', {"code": code}, '', function (d) {
			if (d.flag == true) {
				$(object).next().empty().append("<option value=''>选择市</option>");
				for (var i = 0; i < d.data.length; i++) {
					$(object).next().append("<option value='" + d.data[i].code + "'>" + d.data[i].name + "</option>");
				}
			} else {
				layer.msg(d.msg, {icon: 2});
			}
		});


	};
</script>
</body>

</html>
